<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAdminPersonPostListServer } from '@/api/postList'

import lunb1Png from '@/assets/img1.jpg'
import lunb2Png from '@/assets/img2.jpg'
import lunb3Png from '@/assets/img3.jpg'

// import Swiper core and required modules
import { Autoplay, Navigation, Pagination } from 'swiper/modules'

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [Autoplay, Navigation, Pagination]

const router = useRouter()

const carouselImg = ref([
  { id: 1, imgSrc: lunb1Png },
  { id: 2, imgSrc: lunb2Png },
  { id: 3, imgSrc: lunb3Png }
])

const goDetail = (item) => {
  router.push(`/postList/detail?item=${JSON.stringify(item)}`)
}

const postList1 = ref([])
const postList2 = ref([])
onMounted(async () => {
  const res1 = await getAdminPersonPostListServer(2, 1)
  const res2 = await getAdminPersonPostListServer(2, 2)
  postList1.value = res1.data.data.records
  postList2.value = res2.data.data.records
  console.log(postList1.value, postList2.value)
})
</script>

<template>
  <page-container title="每日推荐">
    <template #extra> </template>

    <section>
      <swiper
        class="swiper1"
        :navigation="true"
        :modules="modules"
        :autoplay="{ delay: 3000, disableOnInteraction: true }"
        :loop="true"
        :scrollbar="{ draggable: true }"
        :pagination="{ el: '.swiper-pagination', clickable: true }"
        :grid="{ rows: 1, fill: 'column' }"
        style="
          --swiper-navigation-color: rgba(0, 0, 0, 0);
          --swiper-pagination-color: #fff;
          --swiper-pagination-bullet-size: 16px;
        "
      >
        <swiper-slide v-for="item in carouselImg" :key="item.id">
          <img
            :src="item.imgSrc"
            alt=""
            style="width: 100%; aspect-ratio: 16/9; border-radius: 20px"
          />
        </swiper-slide>

        <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
        <div class="swiper-button-next" @click.stop="nextEl" />
        <div
          class="swiper-pagination"
          style="transform: translateY(-10px)"
        ></div>
      </swiper>

      <div class="postList left">
        <div>求助列表</div>
        <ul class="postListBox">
          <li
            class="postListItem"
            v-for="item in postList1"
            :key="item.postId"
            @click="goDetail(item)"
          >
            <img :src="item.imageUrls[0]" alt="" />
            <div class="postBox">
              <span class="postListClass">
                <tagSelect :index="item.feed"
              /></span>
              <span class="title">{{ item.title }}</span>
            </div>
          </li>
        </ul>
      </div>

      <div class="postList">
        <div>已领养列表</div>
        <ul class="postListBox">
          <li
            class="postListItem"
            v-for="item in postList2"
            :key="item.postId"
            @click="goDetail(item)"
          >
            <img :src="item.imageUrls[0]" alt="" />
            <div class="postBox">
              <span class="postListClass">
                <tagSelect :index="item.feed"
              /></span>
              <span class="title">{{ item.title }}</span>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </page-container>
</template>

<style scoped>
section {
  width: 50vw;
  margin: auto;
  position: relative;
}

.postList {
  position: absolute;
  top: 0;
  right: -35%;
  width: 30%;
  > div {
    text-align: center;
  }
  .postListBox {
    padding: 0;
    .postListItem {
      display: flex;
      padding: 10px;
      border: 1px solid var(--el-border-color);
      border-radius: 5px;
      margin-bottom: 20px;
      > img {
        width: 40%;
        aspect-ratio: 16/9;
        margin-right: 10px;
      }
      .postBox {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.left {
  left: -35%;
}
.swiper1 {
  display: block;
}
</style>
